<template>
	<view class="navBar">
		<!-- 状态栏 -->
		<view class="statusBar" :style="{height:statusBarHeight+'px'}"></view>
		<!-- 菜单栏（药丸区域） -->
		<view class="menuBar" :style="{height:menuHeight+'px'}">
			<view class="title">{{title ? title : "perfect体验"}}</view>
			<view class="back_area"  @click="handleBack" v-if="isExistBack">
				<img class="img" src="/static/common/back.png"/>
			</view>
			
		</view>
		
	</view>
</template>

<script>
	import {statusBarHeight, menuHeight} from '@/util.js';
	export default {
		name:"NavBar",
		props:['title','backTo'],
		methods:{
			handleBack(){
				switch(this.backTo){
					case "prev":
						uni.navigateBack()
						break;
					case "/pages/index/index" || "/pages/book/index" || "/pages/list/index" || "/pages/store/index" || "/pages/center/index":
						uni.switchTab({
							url:this.backTo
						})
						break;
						
				}
			}
		},
		computed:{
			isExistBack(){
				return this.backTo == null ? false : true;
			}
		},
		
		data(){
			return {
				statusBarHeight: statusBarHeight,
				menuHeight: menuHeight
			}
		}
	}
</script>

<style scoped lang="less">
	@import "../uni.less";
	page{
		background-color: #fff;
	}
	.navBar{
		background-color:@background_color;
		z-index:100;
		width: 100%;
		position: fixed;
		top:0;
		.statusBar{
			width: 100%;
		}
		.menuBar{
			width: 100%;
			display: flex;
			align-items: center;
			.title{
				margin: 0 auto;
				color: #D1A8A8;
				font-weight: 440;
				font-size: 35rpx;
	            margin-top:5rpx;   
				text-align: center;
			}
			
			.back_area{
			    z-index:10;
		        width:80rpx;
	            position: absolute;
			    display: flex;
		        justify-content: center;
	            align-items: center;
			    .img{
		            width: 30rpx;
			        height: 30rpx;
			    }
			}
		}
	}
</style>